<template>
  <el-tabs type="border-card">
    <el-tab-pane label="表单信息">
      <flow-detail-form
        :instance-id="props.instanceId"
        :business-key="props.businessKey"
        :instance-state="props.instanceState"
        :process-type="props.processType"
        @update:taskId="getTaskId"
        @update:eventType="updateEventType"
        ref="flowDetailFormComponent"
      />
    </el-tab-pane>
<!--    <el-tab-pane label="流程图">流程图</el-tab-pane>-->
  </el-tabs>
</template>

<script lang="ts" setup name="flowTabs">
import flowDetailForm from "./flowDeatilForm.vue";
import { defineComponent, toRefs,ref } from 'vue';

const props = defineProps({
  instanceId: {
    type: String,
    required: true,
  },
  businessKey: {
    type: String,
    required: true,
  },
  instanceState: {
    type: Number,
    required: true,
  },
  processType: {
    type: Number,
    required: true,
  },
})

const emits = defineEmits(["update:taskId","update:taskState","update:eventType"]);
const flowDetailFormComponent = ref<InstanceType<typeof flowDetailForm> | null>(null);

const getTaskId = (taskId)=>{
  emits('update:taskId', taskId);
}

const updateEventType = (eventType)=>{
  emits('update:eventType', eventType);
}

//获取组件数据
const getData = () =>{
  return flowDetailFormComponent.value.getData();
}

defineExpose({
  getData
})
onMounted(() => {
  emits('update:taskState', 2);
});

</script>
<style lang="scss" scoped></style>
